<template>
  <a-card :bordered="false" style="height: 400px">
<!--    <div slot="title" style="display: flex; align-items: center;">-->
<!--      <a-icon type="file-done" :style="{ color: 'blue', fontSize: '16px', marginRight: '5px' }"/>-->
<!--      我的待办-->
<!--    </div>-->
    <a slot="extra" @click="viewAllTask" style="color: #999;">查看全部 ></a>
    <!-- 查询区域 -->
    <a-table
      ref="table"
      size="middle"
      rowKey="id"
      :scroll="{y:250}"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleDoTask(record)">办理</a>
          <a-divider type="vertical"/>
          <a @click="handleDelegateTask(record)">委派</a>

        </span>
<!--      <span slot="troubleName" slot-scope="text, record">-->
<!--          <j-ellipsis :value="text" :length="10"></j-ellipsis>-->
<!--        </span>-->
    </a-table>
    <!-- 表单区域 -->
    <do-task-modal ref="doTaskForm" @ok="modalFormOk"></do-task-modal>
    <j-select-user ref="selectUser" @ok="setDelegateCallBack"></j-select-user>
  </a-card>
</template>

<script>
  import DoTaskModal from '@lone/lone-vue/src/views/modules/flow/modules/DoTaskModal'
  // import DoTaskModal from '../flow/modules/DoTaskModal'
  import { JeecgListMixin } from '@lone/lone-vue/src/mixins/JeecgListMixin'
  import { postAction, getAction } from '@lone/lone-vue/src/api/manage'
  import JSelectUser from '@lone/lone-vue/src/components/jeecgbiz/JSelectUser'

  export default {
    name: 'MyTasks1List',
    mixins: [JeecgListMixin],
    components: {
      DoTaskModal,
      JSelectUser
    },
    data() {
      return {
        description: '我的任务页面',
        // 表头
        columns: [
          {
            title: '单号',
            align: 'center',
            dataIndex: 'workOrderCode'
          },
          {
            title: '任务说明',
            align: 'center',
            dataIndex: 'troubleName',
            // scopedSlots: {customRender: 'troubleName'},
          },
          {
            title: '类型',
            align: 'center',
            dataIndex: 'troubleType'
          },
          {
            title: '接收时间',
            align: 'center',
            dataIndex: 'troubleReceiveTime'
          },
          {
            title: '计划维修时间',
            align: 'center',
            dataIndex: 'repairPlanStartTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: '/eqpm/sysSmsConfig/queryMyInBoxs'
        }
      }
    },
    methods: {
      handleDoTask: function(record) {
        this.$refs.doTaskForm.showTask(record)
        this.$refs.doTaskForm.title = '流程办理'
      },
      handleDelegateTask: function(record) {

        if (record.endTime) {
          this.$message.warn('任务已经完成，不能委派人员!')
          return
        }
        this.$refs.selectUser.title = '委派用户选择'
        this.$refs.selectUser.open(record.taskId)
      },

      setDelegateCallBack(userKeys, taskId) {
        var that = this
        postAction('/flow/flowProcess/delegateTask', { taskId: taskId, userId: userKeys }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.loadData()
          } else {
            that.$message.warning(res.message)
          }
        })
      },

      modalFormOk() {
        // 新增/修改 成功时，重载列表
        this.loadData();
      },

      loadData(arg) {
        // if (!this.url.list) {
        //   this.$message.error('请设置url.list属性!')
        //   return
        // }
        // //加载数据 若传入参数1则加载第一页的内容
        // if (arg === 1) {
        //   if (this.device == this.LoneDevice_M) {
        //     this.dataSource = []
        //   }
        //   this.ipagination.current = 1
        // }
        // var params = this.getQueryParams()//查询条件
        // this.loading = true
        // getAction(this.url.list, params).then((res) => {
        //   if (res.success) {
        //     if (this.device == this.LoneDevice_M) {
        //       this.dataSource = this.dataSource.concat(res.result.records)
        //       this.ipagination.current = res.result.current
        //       if (res.result.total > (this.ipagination.current * this.ipagination.pageSize)) {
        //         this.isUnMore = false
        //       } else {
        //         this.isUnMore = true
        //       }
        //     } else {
        //       this.dataSource = res.result.records
        //     }
        //
        //     this.ipagination.total = res.result.total
        //   }
        //   if (res.code === 510) {
        //     this.$message.warning(res.message)
        //   }
        //   this.loading = false
        // })
      },
      viewAllTask() {
        this.$router.push({ name: 'workspace-mytasks', query: {} })
      }
    },
    render: {}
  }
</script>
<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }

  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .bacColorGreen {
    background: green;
  }

  .custom-table-wrap {
    height: 200px;

    /deep/ table {
      .ant-table-thead > tr > th {
        background-color: transparent;
        padding: 16px !important;
      }
    }
  }

  .custom-card {
    /deep/ .ant-card-body {
      padding-top: 0;
      height: 400px;
    }
  }
</style>